<template>
  <div class="timedialog">
    <el-timeline ref="timelineRef" class="draggable-timeline">
      <draggable @end="dropItem" v-model="route.devs" :options="dragOptions">
        <el-timeline-item
          v-for="(item, index) in route.devs"
          :key="index"
          placement="left"
          :type="index + 1 + ''"
          size="large"
          :color="color"
        >
          <span class="timeline-index">{{ index + 1 }}</span>
          <span>{{ item.versionTimestamp }}</span>
          <el-collapse v-model="collapsedItems">
            <el-collapse-item :name="item.agentid">
              <h5 slot="title">
                {{ item.name }}
                <i
                  @click.stop="iconClick(index, item.agentid)"
                  :style="{
                    color: '#909399',
                    fontSize: '16px',
                  }"
                  class="iconfont shezhi icon-quanxianguanli"
                ></i>
                <i
                  @click.stop="deleteClick(index, item.agentid)"
                  class="el-icon-error shanchu"
                  :style="{ color: '#909399', fontSize: '18px' }"
                ></i>
              </h5>
              <div class="card-div">
                <route-card
                  :node="item"
                  :tabName="tabName"
                  ref="routeCard"
                  @research="research"
                ></route-card>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-timeline-item>
      </draggable>
    </el-timeline>
  </div>
</template>
<script>
// import { getTheme } from '../../../utils/auth'
// import { computedRelation } from '../../../utils/conflict'
import draggable from 'vuedraggable'
import RouteCard from '../../../views/Service/components/routeCard'
export default {
  data () {
    return {
      color: '#3378df',
      clickIcon: {},
      activeName: [],
      sortList: [],
      bbb: [],
      collapsedItems: [], // 记录被收起的条目
      dragOptions: {
        animation: 200
      }
    }
  },
  components: {
    draggable,
    RouteCard
  },
  props: {
    route: {
      type: Object
    },
    isOpen: {
      type: Boolean
    },
    tabName: {
      type: String,
      default: 'first'
    }
  },
  watch: {
    isOpen: {
      handler: function (newVal, oldVal) {
        if (!newVal) {
          this.collapsedItems = this.activeName.slice() // 备份当前收起的条目
        } else {
          this.collapsedItems = [] // 清空收起的条目备份
        }
      },
      deep: true
    },
    sortList: {
      handler: function (newVal, oldVal) {
        this.bbb = newVal
      },
      deep: true
    },
    route: {
      handler: function (newVal, oldVal) {
        if (!oldVal.devs) {
          this.collapsedItems = newVal.devs.map(item => item.agentid)
        }
        this.sortList = newVal.devs
        this.activeName = newVal.devs.map(item => item.agentid)
        if (!newVal.devs || !oldVal.devs) return
        const differentAgentIds = newVal.devs.filter(newItem => {
          const oldItem = oldVal.devs.find(item => item.agentid === newItem.agentid)
          return oldItem ? oldItem.agentid !== newItem.agentid : true
        })
        if (differentAgentIds.length > 0) {
          if (this.bbb.length > 0) {
            this.sortList = this.bbb
            this.collapsedItems.push(...differentAgentIds.map(item => item.agentid))
          }
          this.sortList.push(...differentAgentIds)
          const updatedDevs = JSON.parse(JSON.stringify(this.sortList))
          let seenIds = new Set()
          let newDevs = updatedDevs.filter(item => {
            return seenIds.has(item.id) ? false : (seenIds.add(item.id), true)
          })
          this.route.devs = newDevs
        } else {
        }
      },
      deep: true
    }
  },
  created () {
    this.$nextTick(() => {
      this.initDraggableTimeline()
      this.collapsedItems = this.route.devs.map(item => item.agentid)
    })
  },
  methods: {
    dropItem () {
      this.sortList = this.route.devs
    },
    research () {
      this.$emit('onPreviewResearch', true)
    },
    iconClick (index, id) {
      this.$set(this.clickIcon, id, !this.clickIcon[id])
      this.$emit('closeIcon', id)
      this.$emit('openIcon', !this.clickIcon[id])
    },
    deleteClick (index, id) {
      if (this.collapsedItems.includes(id)) {
        this.collapsedItems = this.collapsedItems.filter(item => item !== id)
      }
      this.$emit('delete', id)
      this.route.devs.splice(index, 1)
    },
    initDraggableTimeline () {
      const timelineEl = this.$refs.timelineRef.$el
      const draggableTimeline = timelineEl.querySelector('.draggable-timeline .el-timeline')
      if (!draggableTimeline) return
      draggableTimeline.addEventListener('mousedown', (event) => {
        event.preventDefault()
        draggableTimeline.style.cursor = 'grabbing'
        const initialX = event.clientX
        const initialScrollLeft = draggableTimeline.scrollLeft
        const onMouseMove = (e) => {
          const dx = e.clientX - initialX
          draggableTimeline.scrollLeft = initialScrollLeft - dx
        }
        const onMouseUp = () => {
          draggableTimeline.style.cursor = 'grab'
          document.removeEventListener('mousemove', onMouseMove)
          document.removeEventListener('mouseup', onMouseUp)
        }
        document.addEventListener('mousemove', onMouseMove)
        document.addEventListener('mouseup', onMouseUp)
      })
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>
<style scoped>
.timedialog {
  padding-top: 2PX;
  max-height: calc(100% - 142PX);
  overflow: auto;
}
.el-timeline-item >>> .el-collapse-item__arrow {
  display: none !important;
}
.icon-list {
  font-size: 12PX;
}
.timeline-index {
  position: absolute;
  left: 8PX;
  top: 6PX;
  color: #ffffff;
  font-size: 16PX;
}
.el-timeline-item >>> .el-timeline-item__node--normal {
  left: 120PX;
}
.el-timeline-item >>> .el-timeline-item__tail {
  left: 11PX;
}
.el-timeline-item {
  margin-top: 20PX;
  margin-bottom: 10PX;
}
/* h4 {
  position: absolute;
  top: 0PX;
  left: 148PX;
  font-size: 14PX;
  font-family: 'Microsoft Yahei';
} */
h5 {
  font-size: 14PX;
  width: 335PX;
  font-weight: normal;
  font-family: 'Microsoft Yahei';
}
.el-collapse-item {
  position: relative;
}
.shezhi {
  position: absolute;
  right: 30PX;
  top: 5PX;
}
.shezhi:hover {
  color: #299bcc !important;
}
.shanchu:hover {
  color: #299bcc !important;
}
.shanchu {
  position: absolute;
  right: 0;
  top: 4PX;
}
.el-timeline-item >>> .timeLineInt {
  margin-left: 10PX;
}
.timedialog >>> .el-timeline {
  margin-top: 35PX;
}
.timedialog >>> .el-dialog__header {
  padding: 10PX 20PX;
  height: 25PX;
  line-height: 25PX;
  text-align: left;
  background: #fff;
  border-bottom: solid 1PX #e4e7ed;
}
.timedialog >>> .timeLineInt {
  margin-top: 15PX;
}
.timedialog >>> .el-card__body {
  padding: 14PX;
}
.timedialog >>> .el-card.is-always-shadow {
  box-shadow: none;
}
.timedialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #666;
}
.timedialog >>> .el-dialog__headerbtn:hover .el-dialog__close {
  color: #666;
}
.timedialog >>> .el-dialog__headerbtn {
  top: 14PX;
}
.timedialog >>> .el-collapse {
  margin-left: 10PX;
  border: none;
  margin-top: -22PX;
}
.timedialog >>> .el-collapse-item__header {
  border: none;
  line-height: 16PX;
  height: 25PX;
}
.timedialog >>> .el-collapse-item__wrap {
  border: none;
}
.timedialog >>> .el-collapse-item__content {
  margin-top: 15PX;
  padding-bottom: 0PX !important;
}
.timedialog >>> .el-timeline-item__node--01 {
  width: 25PX !important;
  height: 25PX !important;
  left: 0PX !important;
  background-color: #299BCC !important;
}
.timedialog >>> .el-timeline-item__node--large {
  width: 25PX !important;
  height: 25PX !important;
  left: 0PX !important;
  background-color: #299BCC !important;
}
.change {
  padding: 3PX 8PX;
  background: #339933;
  color: #fff;
  border-radius: 5PX;
}
</style>
<style>
.timedialog .el-dialog {
  margin: 0 auto !important;
  max-height: 90%;
  overflow: hidden;
  top: 5%;
}
.timedialog .abow_dialog {
  justify-content: center;
  align-items: Center;
  overflow: hidden;
}
.timedialog .el-dialog {
  margin: 0 auto !important;
  height: 65%;
  overflow: hidden;
  top: 10%;
}
.timedialog .el-dialog__body {
  position: absolute;
  left: 0;
  top: 46PX;
  bottom: 0PX;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
  padding: 10PX 20PX 0 0;
}
</style>
